<template>
  <div>
    <div class="flex-grid">
      <header-tem :headerDatas="header" @showMask="showMask('repay')"></header-tem>
      <div class="flex-main">
        <template v-if="isStage">
          <div class="stag">
            <div class="bill">
              <div>{{stageTitle}}</div>
              <div class="money">￥<input class="apply-money" type="text" v-model="money"></div>
            </div>
            <ul class="options hairlines">
              <li v-for="(option, index) in options" :key="index">
                <input :id="option.id" type="radio" name="select" :value="option.value" :checked="index === 0">
                <label :for="option.id">{{option.text}}</label>
              </li>
            </ul>
            <div class="explain">
              <p>暂时不想丰期，<span @click="totalPay">全款支付</span></p>
              <p @click="showMask('rate')">利率说明<i class="iconfont icon-warnbk"></i></p>
            </div>
            <div class="confirm">
              <input class="radiu-fullW-bt" type="button" value="确定丰期" @click="stageSave">
            </div>
          </div>
        </template>
        <template v-else>
          <div class="total">
            <div class="bill">
              <div>{{totalTitle}}</div>
              <div class="money">￥<input class="apply-money" type="text" v-model="money"></div>
            </div>
            <div class="explain">
              <p>最近手头有点紧，<span @click="stagePay">试试丰期</span>?</p>
            </div>
            <div class="confirm">
              <input class="radiu-fullW-bt" type="button" :value="money + '元  确认买单'" @click="totalSave">
            </div>
          </div>
        </template>
      </div>
      <div class="loading" v-show="isLoading">
        <div class="circular">
          <svg class="anim-rotate" width="40" height="40">
            <circle class="anim-circle" cx="20" cy="20" r="13" fill="#fff" stroke="#72a5ef" stroke-width="3"></circle>
          </svg>
        </div>
      </div>
    </div>
    <tips-tem v-if="maskIsShow" :html="tipsHtml" :html2="tipsHtml2" :isNormal="isNormal" @hideMask="hideMask"></tips-tem>
  </div>
</template>
<script>
  import header from '../child-header/header.vue'
  import tips from '../tips/tips.vue'
  import $ from 'edom'

  export default {
    name: 'Pay',
    components: {
      'header-tem': header,
      'tips-tem': tips
    },
    data () {
      return {
        title: '支付',
        header: {
          title: '店铺名称',
          hasTips: true,
          tipsIcon: 'icon-warn'
        },
        isNormal: true,
        maskIsShow: false,
        tipsHtml: '只需在还款期限之前将还款金额打到还款账户即可，还款方式暂时只支持线下支付',
        tipsHtml2: '日利率  0.042%，日管理费率  0.758%<br>到期总还款：利息+管理费+本金利息<br>本金利息=日利率×本金×借款天数<br>管理费=日管理费×本金×借款天数',
        isStage: true,
        stageTitle: '参与丰期金额(元)',
        totalTitle: '订单金额(元)',
        money: '',
        options: null,
        isLoading: false
      }
    },
    methods: {
      showMask: function (which) {
        if (which === 'repay') {
          this.isNormal = true
        } else {
          this.isNormal = false
        }
        this.maskIsShow = true
      },
      hideMask: function () {
        this.maskIsShow = false
      },
      totalPay: function () {
        this.isStage = false
      },
      stagePay: function () {
        this.isStage = true
      },
      getChecked: function () {
        let checked = 3
        let select = Array.prototype.slice.call(document.getElementsByName('select'))
        select.forEach(function (item, index) {
          if (item.checked) {
            checked = item.value
          }
        })
        return checked
      },
      getCycle: function () {
        this.axios.post('/api/loan/get_cycle_list', {
          user_id: this.$store.state.user_id,
          token: this.$store.state.token
        }).then((res) => {
          let data = res.data
          if (data.code !== 200) {
            $().Mnews('工程师喂猫去了', 2000)
            return
          }
          let desc = data.desc
          let options = {}
          let arr = []
          desc.forEach((item, index) => {
            options = {}
            options['id'] = 'radio' + index
            options['text'] = '丰' + item + '期'
            options['value'] = item
            arr.push(options)
          })
          this.options = arr
        })
      },
      stageSave: function () {
        let checked = this.getChecked()
        if (!this.money) {
          $().Mnews('请输入正确的金额', 2000)
          return
        }
        this.isLoading = true
        this.axios.post('/api/loan/apply_for', {
          user_id: this.$store.state.user_id,
          token: this.$store.state.token,
          loan_money: this.money,
          cycle: checked,
          sid: this.$route.params.id
        }).then((res) => {
          let data = res.data
          if (data.code === 200) {
            this.isLoading = false
            this.$router.push('/mine/Installment')
          } else if (data.code === 201) {
            this.isLoading = false
            $().Mconfirm({
              title: '提示',
              desc: '您的认证信息未通过！',
              bt1Text: '取消',
              bt2Text: '去认证',
              confirmBt: function () {
                location.href = '#/profile/manage'
              }
            })
          } else {
            this.isLoading = false
            $().Mnews(data.desc, 2000)
          }
        })
      },
      totalSave: function () {
        if (!this.money) {
          $().Mnews('请输入正确的金额', 2000)
          return
        }
        this.api.totalPay(this.money, this.$route.params.id)
      }
    },
    created () {
      this.setTitle(this.title)
      // 获取期数
      this.getCycle()
    }
  }
</script>
<style lang="scss" scoped>
  @function rem($px) {
    @return $px / 75 * 1rem;
  }
  .flex-main{
    padding: 0 rem(24);
    .bill{
      margin: rem(20) 0 rem(28);
      padding: 0 rem(26);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fff;
      height: rem(130);
      border: 1px solid #e6e6e6;
      border-radius: 6px;
      font-size: rem(30);
      color: #333;
      .money{
        font-size: rem(28);
        color: #999;
        span{
          font-size: rem(48);
          color: #141414;
        }
      }
      .apply-money{
        padding-left: rem(30);
        width: rem(200);
        font-size: rem(48);
        color: #141414;
        border-bottom: 1px solid #e6e6e6;
      }
    }
    .options{
      padding-bottom: rem(28);
      font-size: 0;
      li{
        position: relative;
        display: inline-block;
        margin-right: rem(10);
        width: rem(200);
        height: rem(80);
        input[type=radio]{
          opacity: 0;
        }
        label{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 4px;
          border: 1px dashed #e6e6e6;
          background: #fff;
          font-size: rem(30);
          color: #141414;
          text-align: center;
          line-height: rem(80);
        }
        input[type=radio]:checked + label{
          background: #72a5ef;
          color: #fff;
          border: 0;
        }
      }
    }
    .explain{
      padding: rem(15) 0 rem(37);
      font-size: rem(28);
      color: #141414;
      display: flex;
      justify-content: space-between;
      span,.iconfont{
        color: #72a5ef;
      }
      .iconfont{
        margin-left: rem(10);
        font-size: rem(28);
      }
    }
  }
  .loading{
    padding: rem(100) 0 rem(70);
    background: transparent;
    position: absolute;
    top: rem(150);
    left: rem(0);
    right: rem(0);
    .circular{
      position: relative;
      margin: 0 auto;
      width: 40px;
      height: 40px;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.2);
    }
  }
</style>
